<template>
  <div class="enrollmentmanagement">
    <div class="tableContent">
      <div class="buttonBox">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="学院名称">
            <el-select style='width:140px;' v-model="formInline.colleageName" placeholder="请选择">
              <el-option
                v-for="item in formInline.options"
                :key="item.index"
                :label="item.colleageName"
                :value="item.colleageName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属地区">
           <el-input  v-model="formInline.site" placeholder="请输入详细地址"></el-input>
          </el-form-item>
             <el-form-item label="创建时间">
                         <el-date-picker
                            v-model="formInline.beginTime"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            >
                        </el-date-picker>
                        -
                        <el-date-picker
                            v-model="formInline.endTime"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            >
                        </el-date-picker>
                    </el-form-item>
          <el-form-item>
            <div style="margin: -30px 10px">
              <el-button type="primary" @click='serach' size="small">查询</el-button>
              <el-button type="success" @click='refreshInput' size="small">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableContent">
        <el-button type="primary" size="small" @click="next">新建</el-button>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type='index' label="序号" width="70">
          </el-table-column>
          <el-table-column prop="colleageName" label="学院名称" width="180">
          </el-table-column>
          <el-table-column prop="site" label="所属区域"> </el-table-column>
          <el-table-column prop="describeText" label="描述"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="status" label="启用状态">
            <template slot-scope="scope">
              <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#C2C2C2"      
              :active-value='1'
              :inactive-value="0"
              @change="updateIsUsing(scope.row)"
            >
            </el-switch>
            </template>
          </el-table-column>
          <el-table-column  label="操作" >
            <template slot-scope="scope">
            <el-link type="primary" @click="edit(scope.row)">编辑</el-link>
            <span id="line">|</span>
            <el-link type="primary" @click="del(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="query.pageSize"
        prev-text="上一页"
        next-text="下一页"
        layout=" prev, pager, next"
        :total="query.total"
      ></el-pagination>

      <div class="jumper">
        跳到第
        <input type="text" ref="pageNum" :value="query.pageNum" />
        页
      </div>
      <button @click="goPage">确定</button>
    </div>
  </div>
</template>
<script>
import { getTableApi } from "@/api/basics/college.js";
import {recruitList,recruitDel,recruitEdit} from '@/api/recruitStudents/recruit.js'
export default {
  data() {
    return {
      formInline: {
        options: [],
        site:'',
        colleageName: "",
        beginTime:'',
        endTime:'',
      },
      query: {
        pageNum: 1,
        pageSize: 6,
        total: 0
      },
      tableData: [],
    };
  },
  mounted() {
    this.getTableListApi();
    this.gitrecruit()
  },
  methods: {
    async gitrecruit(){
       let res=await recruitList()
       console.log('234',res);
       this.tableData=res.rows
        this.query.total = res.total;
    },
    async getTableListApi() {
      let res = await getTableApi(this.query);
      // console.log("222", res);
      this.formInline.options = res.rows;
    },
    //删除
    del(row){
       console.log('34555',row)
       console.log(row);
      this.$confirm("确认删除记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          recruitDel({ id: JSON.stringify(row.id) }).then(res => {
            console.log(res);
            this.$message.success("删除成功");
             this.gitrecruit()
          });
        })
        .catch(() => {});
    },
     //修改状态
    updateIsUsing(row) {
      console.log(row)
      recruitEdit({ status: row.status, id: row.id });
      this.$message.success("修改成功");
    },
    //修改
    edit(row){
       this.$router.push({
        name: "Editpage",
         params: {
          id: row.id
        }, 
      });
      localStorage.setItem('id',row.id)
    },
    // 分页
    // 改变每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.gitrecruit()
    },
    //切换页数，执行方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val;
      this.gitrecruit()
    },
    goPage() {
      let { value } = this.$refs.pageNum;
      console.log("1", value);
      this.query.pageNum = Number(value);
      this.gitrecruit()
    },
       //重置 
    refreshInput() {
      this.formInline.colleageName = "";
      this.formInline.site = "";
      this.formInline.beginTime = "";
      this.formInline.endTime='';
      this.gitrecruit();
    },
    //查询
    serach(){
      console.log(this.formInline,'1212313');
      recruitList({colleageName:this.formInline.colleageName,
      site:this.formInline.site,
      beginTime:this.formInline.beginTime,
      endTime:this.formInline.endTime}).then(res => {

        console.log(res);
        this.tableData = res.rows;
      });
    },
    next() {
      this.$router.push("/recruitstudents/newpage");
    },
  },
};
</script>

<style lang="scss" scoped>
.enrollmentmanagement {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;

  .el-button {
    // width: 68px;
    height: 32px;
    // line-height: 32px;
    margin-left: 10px;
    vertical-align: middle;
  }
  
.pagination {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: 20px;
  margin-right: 150px;
  .jumper {
    font-size: 14px;
    margin-left: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    input {
      width: 40px;
      height: 26px;
      margin: 0 5px;
      text-align: center;
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #666;
      outline-style: none;
    }
  }
  button {
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    background-color: #4895db;
    border: solid 1px #4895db;
    color: #fff;
    font-size: 14px;
    padding: 0 8px;
  }
}

  .tableContent {
    width: 100%;
    flex: 1;
    background-color: white;
    padding: 0 20px;
    // margin-top: 10px;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
    min-width: 100vh;
    height: 100%;

    .el-button {
      margin: 35px 0 15px 15px;
      width: 95px;
    }

    .buttonBox {
      display: flex;
      justify-content: space-between;
    }

    .handler {
      .el-button {
        margin: 0 10px;
        width: 68px;
      }
    }
  }
}
</style>
